<!-- 批量新增 -->
<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    width="70%"
    destroy-on-close
  >
    <div>
      <el-form
        ref="ruleFormRef"
        :rules="rules"
        :model="dialogForm"
        label-width="140px"
      >
        <el-form-item label="源数据库：" prop="sourceId">
          <el-select
            v-model="dialogForm.sourceId"
            filterable
            style="width: 100%"
            placeholder="请选择源数据库"
            @change="getModelTableData"
          >
            <el-option
              v-for="item in dataBases"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目标数据库：" prop="targetId">
          <el-select
            v-model="dialogForm.targetId"
            filterable
            style="width: 100%"
            placeholder="请选择目标数据库"
            @change="getModelTableData"
          >
            <el-option
              v-for="item in dataBases"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="表：" prop="tableList">
          <el-select
            v-model="dialogForm.tableList"
            filterable
            multiple
            style="width: 100%"
            placeholder="请选择表"
          >
            <el-option
              v-for="item in tableList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="!item.notExisted"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否立即建表：" prop="createFlag">
          <el-radio-group v-model="dialogForm.createFlag" class="ml-4">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="confirmDialog">确定</el-button>
    </template>
  </el-dialog>
</template>
<script>
export default {
  name: "BatchDialog",
  props: {
    dataBases: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      dialogTitle: "批量新增表",
      dialogVisible: false,
      dialogForm: {
        createFlag: "1",
        sourceId: "",
        targetId: "",
        tableList: [],
      },
      rules: {
        sourceId: [
          { required: true, message: "源数据库不能为空！", trigger: "blur" },
        ],
        targetId: [
          { required: true, message: "目标数据库不能为空！", trigger: "blur" },
        ],
        createFlag: [
          { required: true, message: "是否立即建表不能为空!", trigger: "blur" },
        ],
      },
      // 数据库的表
      tableList: [],
    };
  },
  methods: {
    // 打开弹窗
    openDialog() {
      this.dialogForm = {
        createFlag: "1",
        sourceId: "",
        targetId: "",
        tableList: [],
      };
      this.dialogVisible = true;
    },
    getModelTableData() {
      this.$axios
        .get(this.$api.dataConnection.physicalModel.getDataBaseTable, {
          params: {
            sourceId: this.dialogForm.sourceId,
            targetId: this.dialogForm.targetId,
          },
        })
        .then((res) => {
          this.tableList = (res.data.data || []).map((item) => {
            return {
              label: item.tableName,
              value: item.tableName,
              notExisted: item.notExisted,
            };
          });
        });
    },
    confirmDialog() {
      this.$refs.ruleFormRef.validate(valid => {
        if (valid) {
          if (this.dialogForm.sourceId === this.dialogForm.targetId) {
            return this.$message.warning('源数据库和目标数据库不能相同')
           }
          this.$axios
          .post(
            this.$api.dataConnection.physicalModel.batchAddModel,
            this.dialogForm
          )
          .then((res) => {
            if (res.data.code === 200) {
              this.$message.success(res.data.message);
              this.$emit("reload");
              this.dialogVisible = false;
            } else {
              this.$message.warning(res.data.message);
            }
          });
        } else {
          this.$message.warning('请检查必填项')
        }
      });
    },
  },
};
</script>
<style scoped></style>
